<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Elmer I Fast build Admin dashboard for any platform</title>
	<meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework." />
	<meta name="keywords" content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, visualization, web app, application" />
	<meta name="author" content="hencework"/>
	<!-- Custom CSS -->
	<link href="dist/css/style.css" rel="stylesheet" type="text/css">
	<script src="dist/js/echarts.min.js"></script>

</head>
<body>

<!--/Preloader-->
<div class="wrapper  theme-1-active pimary-color-blue">
	<!--展示图表区域-->
	<div id="main" style="height: 400px; width: 600px;"></div>
</div>
<!-- /#wrapper -->


<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Slimscroll JavaScript -->
<script src="dist/js/jquery.slimscroll.js"></script>
<!-- Fancy Dropdown JS -->
<script src="dist/js/dropdown-bootstrap-extended.js"></script>
<!-- Owl JavaScript -->
<script src="vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- Switchery JavaScript -->
<script src="vendors/bower_components/switchery/dist/switchery.min.js"></script>
<!-- Init JavaScript -->
<script src="dist/js/init.js"></script>

</body>
<script>
	// 创建Echarts对象
	let mycharts = echarts.init(document.getElementById("main"));
	// ajax请求获取数据
	$.post("/lg/industry/countCityNums.do", function (data) {
		if(data.status == 0){
			mycharts.setOption({
				tooltip: {		//提示组件
					trigger: 'item', //触发类型  item 如果是散点图 饼图
					formatter: '{a} <br/>{b}: {c} ({d}%)' //代表提示悬浮窗的格式  {a}{b}{c}分别代表系列名，数据名，数值
				},
				// legend: { //图例组件
				// 	orient: 'vertical', //代表布局  vertical 水平布局
				// 	left: 10,  //图例容器距离左边10像素
				// 	data: data.data.cityNameList
				// },
				series: [// 系列列表
					{
						name: '各个城市招聘人数',//系列名称
						type: 'pie',//图表类型  pie饼图
						selectedMode: 'single',//选中模式   single选中dange
						radius: [0, '35%'],//图标半径

						label: {//饼图标签的信息
							position: 'inner', //饼图扇区的展示信息
							fontSize: 14,
						},
						labelLine: {//标签视觉引导线
							show: false
						},
						data: data.data.thridList
					},
					{
						name: '各个城市招聘人数',
						type: 'pie',
						radius: ['45%', '60%'], //外层饼图
						labelLine: {
							length: 30,
						},
						label: {
							formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
							backgroundColor: '#F6F8FC',
							borderColor: '#8C8D8E',
							borderWidth: 1,
							borderRadius: 4,

							rich: { //自定义富文本样式
								a: {
									color: '#6E7079',
									lineHeight: 22,
									align: 'center'
								},
								hr: {
									borderColor: '#8C8D8E',
									width: '100%',
									borderWidth: 1,
									height: 0
								},
								b: {
									color: '#4C5058',
									fontSize: 14,
									fontWeight: 'bold',
									lineHeight: 33
								},
								per: {
									color: '#fff',
									backgroundColor: '#4C5058',
									padding: [3, 4],
									borderRadius: 4
								}
							}
						},
						data: data.data.dataList
					}
				]
			})
		}
	}, "json");
	//在回调函数中设置option
</script>
</html>
